<template>
  <div class="historical">
    <YesterDay :yesterday="yesterday" />
    <Today :today="today" />
    <Tmp />
    <TmpByMonth :data="statsByMonth" />
    <Rain :data="rain" />
  </div>
</template>


<script>
export default { name: "historical" };
</script>
<script setup>
import YesterDay from "./cpns/yesterday.vue";
import Today from "./cpns/today.vue";
import TmpByMonth from "./cpns/tmpbymonth.vue";
import Rain from "./cpns/rain.vue";
import Tmp from "./cpns/tmp.vue";

import usePublicStore from "@/stores/modules/public";
import useHistoricalStore from "@/stores/modules/historical";
import { storeToRefs } from "pinia";

const publicStore = usePublicStore();
const { city, code } = storeToRefs(publicStore);

const historicalStore = useHistoricalStore();
watch(city, (newCity) => {
  historicalStore.fetchHistoricalData(newCity, code.value);
});
city.value && historicalStore.fetchHistoricalData(city.value, code.value);

const { today, yesterday, statsByMonth, rain } = storeToRefs(historicalStore);
</script>

<style lang="less" scoped>
.historical {
  max-width: 1180px;
  margin: 0 auto;
}
</style>